<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <script src="lib/facePrint.js"></script>
    <link rel="stylesheet" href="lib/reset.css">
</head>
<body>
<style>
    .chart {
        height: 500px;
    }

    h1 {
        font-size: 20px;
        text-align: center;
        background: #bbb;
        padding: 10px 0;
    }
</style>

<h1>visual on hue</h1>
<div class="chart" id="mainH"></div>
<h1>visual on color opacity</h1>
<div class="chart" id="mainZ"></div>
<h1>pieces | auto split | check: min &gt; dataMin; max &lt; dataMax; </h1>
<div class="chart" id="mainX"></div>
<h1>pieces | auto split | check: minOpen/maxOpen</h1>
<div class="chart" id="mainX2"></div>
<h1>pieces | check: auto-sort</h1>
<div class="chart" id="main0"></div>
<h1>continuous | check: area that greater than dataMax</h1>
<div class="chart" id="main1"></div>
<h1>continuous | log axis | inverse axis | gradient on xAxis</h1>
<div class="chart" id="main2"></div>
<h1>continuous | positive and negative | check: min &gt; dataMin; max &lt; dataMax; </h1>
<div class="chart" id="main4"></div>
<h1>category axis</h1>
<div class="chart" id="mainX0"></div>


<script>

    require([
        'echarts'
        // 'echarts/chart/line',
        // 'echarts/chart/bar',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/visualMap',
        // 'echarts/component/dataZoom'
    ], function (echarts) {

        var main = document.getElementById('mainH');
        if (!main) {
            return;
        }
        var chart = echarts.init(main);

        var data0 = [];

        var MAX_DIM1 = 100;

        var itemStyle = {
            normal: {
                opacity: 0.8,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: 'rgba(0, 0, 0, 0.3)'
            }
        };

        var last = 60;
        var lastDelta = 20;
        for (var i = 0; i < MAX_DIM1; i++) {
            lastDelta += (Math.random() - 0.5) * 15;
            data0.push([
                i,
                last += lastDelta
            ]);
        }

        chart.setOption({
            grid: {
                top: 100,
                bottom: 100
            },
            xAxis: {
                type: 'value',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    show: false
                }
            },
            visualMap: [
                {
                    show: true,
                    left: 'center',
                    bottom: 20,
                    orient: 'horizontal',
                    itemWidth: 20,
                    itemHeight: 200,
                    min: 0,
                    max: MAX_DIM1,
                    calculable: true,
                    range: [5, 95],
                    dimension: 0,
                    inRange: {
                        colorHue: [0, 300],
                        colorLightness: 0.35,
                        colorSaturation: 1
                    },
                    outOfRange: {
                        color: '#eee'
                    }
                }
            ],
            series: [
                {
                    name: 'hue',
                    type: 'line',
                    barMaxWidth: 10,
                    itemStyle: itemStyle,
                    areaStyle: {normal: {}},
                    data: data0
                }
            ]
        });
    });

</script>


<script>

    require([
        'echarts'
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/visualMap',
        // 'echarts/component/dataZoom'
    ], function (echarts) {

        var main = document.getElementById('mainZ');
        if (!main) {
            return;
        }
        var chart = echarts.init(main);

        var xAxisData = [];
        var data1 = [];
        var data2 = [];
        var min = Infinity;
        var max = -Infinity;

        var base1 = Math.round(Math.random() * 30);
        var base2 = base1;
        for (var i = 0; i < 10; i++) {
            xAxisData.push('类目' + i);
            base1 += Math.round(Math.random() * 60);

            if (i > 500 && i < 550) {
                data1.push(180);
            } else if (i > 700 && i < 740) {
                data1.push(-90);
            } else {
                data1.push(base1);
            }

            base2 += Math.round(Math.random() * 30 - 5);
            data2.push(base2);

            min = Math.min(data1[data1.length - 1], data2[data2.length - 1], min);
            max = Math.max(data1[data1.length - 1], data2[data2.length - 1], max);
        }

        chart.setOption({
            color: ['#01003D', '#004202'],
            legend: {
                data: ['line1', 'line2']
            },
            visualMap: {
                type: 'piecewise',
                top: 'center',
                inRange: {
                    opacity: [0.1, 1]
                },
                outOfRange: {
                    color: '#fff'
                },
                min: min,
                max: max,
                minOpen: true,
                maxOpen: true
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'line'
                }
            },
            xAxis: {
                data: xAxisData,
                boundaryGap: false
            },
            yAxis: {},
            series: [{
                name: 'line1',
                type: 'line',
                stack: 'all',
                symbol: 'none',
                lineStyle: {normal: {width: 8}},
                data: data1
            }, {
                name: 'line2',
                type: 'line',
                stack: 'all',
                symbol: 'none',
                lineStyle: {normal: {width: 8}},
                data: data2
            }]
        });
    });

</script>


<script>

    require([
        'echarts'
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/visualMap',
        // 'echarts/component/dataZoom'
    ], function (echarts) {

        var main = document.getElementById('mainX0');
        if (!main) {
            return;
        }
        var chart = echarts.init(main);

        var xAxisData = [];
        var data1 = [];

        var base = Math.round(Math.random() * 30);
        for (var i = 0; i < 10; i++) {
            xAxisData.push('类目' + i);
            base += Math.round(Math.random() * 10 - 5);

            if (i > 500 && i < 550) {
                data1.push(180);
            } else if (i > 700 && i < 740) {
                data1.push(-90);
            } else {
                data1.push(base);
            }
        }

        chart.setOption({
            visualMap: {
                type: 'piecewise',
                top: 'center',
                inRange: {
                    color: ['red', 'green', 'black']
                },
                outOfRange: {
                    color: '#aaa'
                },
                dimension: 0,
                min: 0,
                max: 10
            },
            dataZoom: {
                orient: 'vertical'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'line'
                }
            },
            xAxis: {
                data: xAxisData,
                boundaryGap: false
            },
            yAxis: {},
            series: [{
                name: 'line',
                type: 'line',
                stack: 'all',
                symbol: 'circle',
                areaStyle: {normal: {}},
                symbolSize: 10,
                data: data1
            }]
        });
    });

</script>


<script>

    require([
        'echarts'
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/visualMap',
        // 'echarts/component/dataZoom'
    ], function (echarts) {

        var main = document.getElementById('mainX');
        if (!main) {
            return;
        }
        var chart = echarts.init(main);

        var xAxisData = [];
        var data1 = [];

        var base = Math.round(Math.random() * 30);
        for (var i = 0; i < 1000; i++) {
            xAxisData.push('类目' + i);
            base += Math.round(Math.random() * 10 - 5);

            if (i > 500 && i < 550) {
                data1.push(180);
            } else if (i > 700 && i < 740) {
                data1.push(-90);
            } else {
                data1.push(base);
            }
        }

        chart.setOption({
            visualMap: {
                type: 'piecewise',
                top: 'center',
                inRange: {
                    color: ['red', 'green', 'black']
                },
                outOfRange: {
                    color: '#aaa'
                },
                min: -70,
                max: 150
            },
            dataZoom: {
                orient: 'vertical'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'line'
                }
            },
            xAxis: {
                data: xAxisData,
                boundaryGap: false
            },
            yAxis: {},
            series: [{
                name: 'line',
                type: 'line',
                stack: 'all',
                symbol: 'circle',
                areaStyle: {normal: {}},
                symbolSize: 10,
                data: data1
            }]
        });
    });

</script>


<script>

    require([
        'echarts'
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/visualMap',
        // 'echarts/component/dataZoom'
    ], function (echarts) {

        var main = document.getElementById('mainX2');
        if (!main) {
            return;
        }
        var chart = echarts.init(main);

        var xAxisData = [];
        var data1 = [];

        var base = Math.round(Math.random() * 30);
        for (var i = 0; i < 1000; i++) {
            xAxisData.push('类目' + i);
            base += Math.round(Math.random() * 10 - 5);

            if (i > 500 && i < 550) {
                data1.push(180);
            } else if (i > 700 && i < 740) {
                data1.push(-90);
            } else {
                data1.push(base);
            }
        }

        chart.setOption({
            visualMap: {
                type: 'piecewise',
                top: 'center',
                inRange: {
                    color: ['red', 'green', 'black']
                },
                outOfRange: {
                    color: '#aaa'
                },
                min: -70,
                max: 150,
                minOpen: true,
                maxOpen: true
            },
            dataZoom: {
                orient: 'vertical'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'line'
                }
            },
            xAxis: {
                data: xAxisData,
                boundaryGap: false
            },
            yAxis: {},
            series: [{
                name: 'line',
                type: 'line',
                stack: 'all',
                symbol: 'circle',
                areaStyle: {normal: {}},
                symbolSize: 10,
                data: data1
            }]
        });
    });

</script>


<script>

    require([
        'echarts'
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/visualMap',
        // 'echarts/component/dataZoom'
    ], function (echarts) {

        var main = document.getElementById('main0');
        if (!main) {
            return;
        }
        var chart = echarts.init(main);

        var xAxisData = [];
        var data1 = [];

        var base = Math.round(Math.random() * 100);
        for (var i = 0; i < 1000; i++) {
            xAxisData.push('类目' + i);
            base += Math.round(Math.random() * 10 - 5);

            if (i > 500 && i < 550) {
                data1.push(130);
            } else if (i > 700 && i < 740) {
                data1.push(-20);
            } else {
                data1.push(base);
            }
        }

        chart.setOption({
            visualMap: {
                type: 'piecewise',
                top: 'center',
                inRange: {
                    color: ['red', 'green', 'black']
                },
                outOfRange: {
                    color: '#aaa'
                },
                pieces: [{
                    lte: 120,
                    gt: 100,
                    color: 'red'
                }, {
                    lt: 80,
                    gt: 70
                }, {
                    lt: 90,
                    gt: 50
                }, {
                    lte: 40
                }]
            },
            dataZoom: {
                orient: 'vertical'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'line'
                }
            },
            xAxis: {
                data: xAxisData,
                boundaryGap: false
            },
            yAxis: {},
            series: [{
                name: 'line',
                type: 'line',
                stack: 'all',
                symbol: 'circle',
                areaStyle: {normal: {}},
                symbolSize: 10,
                data: data1
            }]
        });
    });

</script>


<script>

    require([
        'echarts'
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/visualMap',
        // 'echarts/component/dataZoom'
    ], function (echarts) {

        var main = document.getElementById('main1');
        if (!main) {
            return;
        }
        var chart = echarts.init(main);

        var xAxisData = [];
        var data1 = [];

        var base = -Math.round(Math.random() * 500 + 500);
        var min = Infinity;
        var max = -Infinity;
        for (var i = 0; i < 1000; i++) {
            xAxisData.push('类目' + i);
            base -= Math.round(Math.random() * 2);
            data1.push(base);

            base > max && (max = base);
            base < min && (min = base);
        }

        max += 500;
        min -= 500;

        chart.setOption({
            visualMap: {
                top: 'center',
                calculable: true,
                type: 'continuous',
                inRange: {
                    color: ['red', 'green', 'black']
                },
                outOfRange: {
                    color: '#aaa'
                },
                range: [min + 100, max - 100],
                min: min,
                max: max
            },
            dataZoom: {
                orient: 'vertical'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'line'
                }
            },
            xAxis: {
                data: xAxisData,
                boundaryGap: false
            },
            yAxis: {},
            series: [{
                name: 'line',
                type: 'line',
                stack: 'all',
                symbol: 'circle',
                areaStyle: {normal: {}},
                symbolSize: 10,
                data: data1
            }]
        });
    });

</script>


<script>

    require([
        'echarts'
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/visualMap',
        // 'echarts/component/dataZoom'
    ], function (echarts) {

        var main = document.getElementById('main2');
        if (!main) {
            return;
        }
        var chart = echarts.init(main);

        var xAxisData = [];
        var data1 = [];

        var base = Math.round(Math.random() * 500 + 500);
        var min = Infinity;
        var max = -Infinity;
        for (var i = 0; i < 1000; i++) {
            xAxisData.push('类目' + i);
            base += Math.round(Math.random() * 500);
            data1.push(base);

            base > max && (max = base);
            base < min && (min = base);
        }

        max += 100;
        min -= 100;

        chart.setOption({
            visualMap: {
                orient: 'horizontal',
                left: 'center',
                top: 0,
                inverse: true,
                calculable: true,
                type: 'continuous',
                inRange: {
                    color: ['red', 'green', 'black']
                },
                outOfRange: {
                    color: '#aaa'
                },
                range: [min + 80, max - 80],
                dimension: 0,
                min: min,
                max: max
            },
            dataZoom: {
                orient: 'vertical'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'line'
                }
            },
            yAxis: {
                data: xAxisData,
                boundaryGap: false
            },
            xAxis: {
                type: 'log',
                inverse: true
            },
            series: [{
                name: 'line',
                type: 'line',
                stack: 'all',
                symbol: 'circle',
                areaStyle: {normal: {}},
                symbolSize: 10,
                data: data1
            }]
        });
    });

</script>


<script>

    require([
        'echarts'
        // 'echarts/chart/line',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/visualMap',
        // 'echarts/component/dataZoom'
    ], function (echarts) {

        var main = document.getElementById('main4');
        if (!main) {
            return;
        }
        var chart = echarts.init(main);

        var xAxisData = [];
        var data1 = [];

        var base = Math.round(Math.random() * 100);
        var min = Infinity;
        var max = -Infinity;
        for (var i = 0; i < 1000; i++) {
            xAxisData.push('类目' + i);
            base += Math.round(Math.random() * 240 - 120);
            data1.push(base);

            base > max && (max = base);
            base < min && (min = base);
        }

        var span = max - min;

        max -= span / 6;
        min += span / 6;

        chart.setOption({
            visualMap: {
                top: 'center',
                calculable: true,
                type: 'continuous',
                inRange: {
                    color: ['red', 'green', 'black']
                },
                outOfRange: {
                    color: '#aaa'
                },
                min: min,
                max: max
            },
            dataZoom: {
                orient: 'vertical'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'line'
                }
            },
            xAxis: {
                data: xAxisData,
                boundaryGap: false
            },
            yAxis: {},
            series: [{
                name: 'line',
                type: 'line',
                stack: 'all',
                symbol: 'circle',
                areaStyle: {normal: {}},
                symbolSize: 10,
                data: data1
            }]
        });
    });

</script>

</body>
</html>
